<template>
  <el-main style="padding: 0px 20px">
    <div style="margin:20px 0px">
      <div style="margin:20px 0px">
        <el-button icon="el-icon-plus" v-if="hasPerm('field:fieldinfo:add')" type="success" size="medium" @click="addField({id:0})">新增</el-button>
      </div>
    </div>
    <el-table
      :height="tableHeight"
      :data="fieldList"
      border
      stripe
      row-key="id"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column width="200px" prop="name" label="名称"></el-table-column>
      <el-table-column width="220px" prop="locate" align="center" label="位置" show-overflow-tooltip></el-table-column>
      <el-table-column prop="remark" align="center" label="介绍" show-overflow-tooltip></el-table-column>
      <el-table-column sortable width="100px" prop="cost" align="center" label="费用">
        <template slot-scope="scope">
          {{scope.row.cost | showCost}}
        </template>
      </el-table-column>
      <el-table-column sortable width="100px" prop="seat" align="center" label="容量">
        <template slot-scope="scope">
          {{scope.row.seat | showSeat}}
        </template>
      </el-table-column>
      <el-table-column width="100px" prop="category" align="center" label="类别"></el-table-column>
      <el-table-column width="100px" prop="fieldUserName" align="center" label="负责人"></el-table-column>
      <el-table-column width="100px" prop="status" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag size="normal" type="info" v-if="scope.row.status == '0'">停用</el-tag>
          <el-tag size="normal" type="success" v-if="scope.row.status == '1' ">正常</el-tag>
          <el-tag size="normal" type="danger" v-if="scope.row.status =='2'" >维护</el-tag>
        </template>
      </el-table-column>
      <el-table-column  align="center" width="200" label="操作">
        <template slot-scope="scope">
          <!-- <el-button v-if="hasPerm('field:fieldinfo:add') && scope.row.pid==0" type="success" icon="el-icon-circle-plus-outline" size="small" @click="addField(scope.row)">添加</el-button> -->
          <el-button v-if="hasPerm('field:fieldinfo:edit')" type="primary" icon="el-icon-edit" size="small" @click="editField(scope.row)">编辑</el-button>
          <el-dropdown
            v-if="scope.row.pid==0"
            v-show="hasPerm('field:fieldinfo:edituser')||hasPerm('field:fieldinfo:add')||hasPerm('field:fieldinfo:delete')"
            @command="(command)=>{handleCommand(command, scope.row)}"
            trigger="click"
            style="margin-left:10px"
            placement="bottom-start">
            <el-button size="small" type="warning">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="hasPerm('field:fieldinfo:edituser')" command="editFieldUser">修改负责人</el-dropdown-item>
              <el-dropdown-item v-if="hasPerm('field:fieldinfo:add')" command="addField">添加子场馆</el-dropdown-item>
              <el-dropdown-item v-if="hasPerm('field:fieldinfo:delete')" command="deleteField">删除场馆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button v-if="hasPerm('field:fieldinfo:delete') && scope.row.pid!=0" type="danger" icon="el-icon-delete" size="small" @click="deleteField(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或编辑弹框 -->
    <my-dialog
      :title="fieldDialog.title"
      :width="fieldDialog.width"
      :height="fieldDialog.height"
      :visible="fieldDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="fieldFormData"
          ref="fieldFormRef"
          :rules="rules"
          label-width="80px"
          size="small"
        >
          <el-form-item prop="name" size="small" label="场馆名称">
            <el-input v-model="fieldFormData.name" clearable></el-input>
          </el-form-item>

          <el-form-item prop="locate" size="small" label="场馆位置">
            <el-input :maxlength="20" show-word-limit clearable v-model="fieldFormData.locate"></el-input>
          </el-form-item>

          <el-form-item prop="week" size="small" label="开放星期" v-if="!isChildren">
            <el-checkbox-group v-model="weekList">
              <el-checkbox v-for="(item,index) in weeks" :key="index" :label="index">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item prop="cid" size="small" label="开放时间">
            <el-select
              style="width: 90%;"
              filterable
              default-first-option
              v-model="fieldFormData.times"
              multiple
              placeholder="点击选择或输入搜索时间段"
              :disabled="noTimeChoice"
            >
              <el-option
                v-for="item in timeList"
                :key="item.id"
                :label="item.time"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item prop="cid" size="small" label="场馆类型">
                <el-select
                  style="min-width: 216px;"
                  filterable
                  clearable
                  :disabled="noCaChoice"
                  default-first-option
                  v-model="fieldFormData.cid"
                  placeholder="点击选择或输入搜索相应类型"
                >
                  <el-option
                    v-for="item in categories"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="status" size="small" label="场馆状态">
                  <el-select clearable v-model="fieldFormData.status" placeholder="点击选择">
                    <el-option
                      v-for="item in statusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="cost" size="small" label="场馆费用">
                <el-input-number
                  v-model.number="fieldFormData.cost"
                  :controls="false"
                  :precision="2"
                  :min="0"
                  :max="1000"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="seat" size="small" label="场馆容量">
                <el-input-number
                  controls-position="right"
                  v-model.number="fieldFormData.seat"
                  :min="0"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="sort" size="small" label="场馆序号">
                <el-input-number
                  controls-position="right"
                  v-model.number="fieldFormData.sort"
                  :min="0"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item prop="remark" size="small" label="场馆介绍">
            <el-input
              type="textarea"
              maxlength="100"
              show-word-limit
              v-model="fieldFormData.remark"
              :rows="5"
              resize="none"
              placeholder="（限100字）"
            ></el-input>
          </el-form-item>
          <br/>
          <el-form-item size="small" label="场馆图片">
            <el-upload
              :file-list="fileList"
              ref="pic"
              list-type="picture-card"
              :class="showUploadButton ? 'uoloadSty' : 'disUoloadSty'"
              action="#"
              :http-request="requestUpload"
              :on-preview="handlePictureCardPreview"
              multiple
              :limit="5"
              :on-exceed="handleExceed"
              accept=".png,.jpg,.jpeg"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :on-remove="handleRemove"
              >
                <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

        </el-form>
      </div>
    </my-dialog>

    <!-- 修改负责人弹框 -->
    <my-dialog
      :title="fieldUserManagerDialog.title"
      :width="fieldUserManagerDialog.width"
      :height="fieldUserManagerDialog.height"
      :visible="fieldUserManagerDialog.visible"
      @onClose="onFieldUserManagerDialogClose"
      @onConfirm="onFieldUserManagerDialogConfirm"
    >
      <div slot="content">
        <el-descriptions title="当前负责人：" :column="4" v-if="editNowRowFieldUser.fieldUserNid!=null">
            <el-descriptions-item label="学号/工号">{{editNowRowFieldUser.fieldUserNid}}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{editNowRowFieldUser.fieldUserName}}</el-descriptions-item>
            <el-descriptions-item label="性别">
              <el-tag size="mini" type="warning" v-if="editNowRowFieldUser.fieldUserSex == '0'">女</el-tag>
              <el-tag size="mini" v-if="editNowRowFieldUser.fieldUserSex == '1' ">男</el-tag>
              <el-tag size="mini" type="info" v-if="editNowRowFieldUser.fieldUserSex !=0 && editNowRowFieldUser.fieldUserSex != 1" >保密</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="电话号码">{{editNowRowFieldUser.fieldUserPhone}}</el-descriptions-item>
        </el-descriptions>
        <h3 style="color:#000;margin-bottom:20px;display: inline-block;" v-if="editNowRowFieldUser.fieldUserNid==null">当前负责人：<span style="font-weight:normal;">无</span></h3>
        <h3 style="color:#000;">可选负责人：</h3>
        <el-table ref="fieldUserTable" :data="showFieldUserManagerList" highlight-current-row @current-change="handleCurrentChange" height="265" >
          <el-table-column type="index" align="center" width="174">
            <template slot="header">
              <my-Search :inputNoOptionSpan="24" :searchWay="true" :inputPlaceholder="'姓名'" @onSearch="getSearchContent"></my-Search>
            </template>
          </el-table-column>
          <el-table-column prop="nid" align="center" label="学号/工号"></el-table-column>
          <el-table-column prop="username" align="center" label="姓名"></el-table-column>
          <el-table-column
            prop="sex"
            align="center"
            label="性别"
            :filters="[{text: '男', value: 1},{text: '女', value: 0},{text: '保密', value: null}]"
            :filter-method="sexFilterHandler"
            >
            <template slot-scope="scope">
              <el-tag size="normal" type="warning" v-if="scope.row.sex == '0'">女</el-tag>
              <el-tag size="normal" v-if="scope.row.sex == '1' ">男</el-tag>
              <el-tag size="normal" type="info" v-if="scope.row.sex !=0 && scope.row.sex != 1" >保密</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" align="center" label="电话号码"></el-table-column>
        </el-table>
        <h3 v-if="currentRow!=null" style="color:#000;margin-top:20px;display: inline-block;">已选择：<span style="font-weight:normal;">{{currentRow.username}}</span></h3>
      </div>
    </my-dialog>

    <el-dialog append-to-body :visible.sync="picsVisible">
      <img width="100%" :src="picsPreviewUrl" alt="">
    </el-dialog>
  </el-main>
</template>

<script>
import {
  getFieldListApi,
  getFieldByIdApi,
  addFieldApi,
  editFieldApi,
  editFieldUserApi,
  deleteFieldApi
} from "@/api/field";
import { getCategoryApi } from "@/api/category";
import { getFieldUserManagerApi } from "@/api/user";
import { getTimesApi } from "@/api/times";
import {
  uploadPicturesApi,
  getPicturesByBidApi,
  deletePicturesApi,
  deleteAllFilesApi
} from "@/api/pictures";
import myDialog from "@/components/MyDialog/index";
import mySearch from "@/components/MySearch/index";
export default {
  components: { myDialog,mySearch },
  data() {
    return {
      //图片上传设置
      picsPreviewUrl: '',
      picsVisible: false,
      showUploadButton: true,
      fileList: [],
      deletePicsList: [],

      //是否是子节点
      isChildren: false,
      //星期
      weeks: ['周日','周一','周二','周三','周四','周五','周六'],
      //状态
      statusList :[{value:1,label:'正常'},{value:2,label:'维护'},{value:0,label:'停用'}],
      //新增或编辑表单验证规则
      rules: {
        name: { required: true, trigger: "blur", message: "请填写场馆名称" },
        cost: { required: true, trigger: "blur", message: "请填写场馆费用" },
        sort: { type: "number", trigger: "blur", message: "请输入合法数字" }
      },
      //true：编辑 flase :新增
      actionType: "",
      //限制类型选择
      noCaChoice: false,
      //限制时间段选择
      noTimeChoice: false,
      //新增或编辑表单数据域
      fieldFormData: {
        id: "",
        pid: "",
        fieldNo: "",
        name: "",
        locate: "",
        remark: "",
        cost: "",
        seat: "",
        week: "",
        times: "",
        cid: "",
        status: "",
        sort: "",
        version:"",
      },
      weekList: [],
      //保存复制全部时间段
      copyTimeList: "",
      //保存复制父级时间段
      parentData: "",
      //可选择的时间段
      timeList: "",
      //运动类别
      categories: "",

      //符合场馆负责人用户列表
      fieldUserManagerList: [],
      //经过滤后的符合场馆负责人用户列表
      showFieldUserManagerList: [],
      //当前行场馆负责人信息
      editNowRowFieldUser: "",
      //修改场馆负责人弹框属性
      fieldUserManagerDialog: {
        title: "",
        width: 920,
        height: 444,
        visible: false,
      },
      currentRow: null,
      searchName: "",

      //新增或编辑弹框属性
      fieldDialog: {
        title: "",
        width: 920,
        height: 0,
        visible: false,
      },
      //表格高度
      tableHeight: 0,
      //场馆数量列表
      fieldList: [],
    };
  },
  created() {
    this.getFieldUserManagerList();
    this.getCategory();
    this.getFieldList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 170;
    })
  },
  methods: {
    // 覆盖默认的上传行为
    requestUpload() {
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") === -1) {
        this.$message.error("文件格式错误，请上传类型如：JPG、PNG后缀的图片！");
        return false;
      }
      if (file.size> 3145728) {
        this.$message.error("请上传大小不超过3M的图片！");
        return false;
      }
      return true;
    },
    handleExceed(){
      this.$message.info("最多选择上传五张图片，请重新选择！");
    },
    //删除图片
    handleRemove(file,filelist) {
      if(file.status==="success"){
        this.deletePicsList.push(file.id);
      }
      this.isShowUploadButton(filelist.length)
    },
    //提交图片
    handleChange(file,filelist){
      this.isShowUploadButton(filelist.length)
    },
    //预览图片
    handlePictureCardPreview(file) {
      this.picsPreviewUrl = file.url;
      this.picsVisible = true;
    },
    //判断是否显示上传按钮
    isShowUploadButton(listLength){
      if(listLength >= 5){
        this.showUploadButton = false;
      }else{
        this.showUploadButton = true;
      }
    },
    //获取图片
    async getPicturesByBidApi(bid){
      let res = await getPicturesByBidApi({"bid":bid})
      if(res&&res.code==200){
        this.fileList = res.data;
        this.isShowUploadButton(this.fileList.length);
      }
    },
    //上传图片
    async uploadPictures(list,bid){
      let formData = new FormData();
      list.forEach(item=>{
        formData.append("files",item.raw);
      })
      formData.append("bid",bid);
      await uploadPicturesApi(formData);
    },
    //确认删除图片
    async deletePictures(list){
      await deletePicturesApi({ids:list.toString()});
    },
    //更多下拉菜单
    handleCommand(command,row) {
      switch (command) {
        case 'addField':
          this.addField(row)
        break;
        case 'editFieldUser':
          this.givefieldUser(row)
        break;
        case 'deleteField':
          this.deleteField(row)
        break;
      }
    },
    //打开修改场馆负责人的弹框
    givefieldUser(row){
      this.editNowRowFieldUser = row;
      this.showFieldUserManagerList = this.fieldUserManagerList.filter(item=>{ return item.id!=this.editNowRowFieldUser.uid});
      this.fieldUserManagerDialog.title = "修改【"+row.name+"】负责人";
      this.fieldUserManagerDialog.visible = true;
    },
    //关闭修改场馆负责人的弹框
    onFieldUserManagerDialogClose(){
      this.editNowRowFieldUser = "";
      this.$refs.fieldUserTable.setCurrentRow();
      this.fieldUserManagerDialog.visible = false;
    },
    //确认修改场馆负责人
    async onFieldUserManagerDialogConfirm(){
      if(this.currentRow){
        let parm ={
          id:this.editNowRowFieldUser.id,
          uid:this.currentRow.id
        }
        let res = await editFieldUserApi(parm);
        if(res&&res.code==200){
          this.getFieldList();
          this.onFieldUserManagerDialogClose();
          this.$message.success(res.msg);
        }
      }else{
        this.$message.info("请点击选择表格中的负责人！");
      }

    },
    //性别筛选
    sexFilterHandler(value, row, column){
      const property = column['property'];
      return row[property] === value;
    },
    //搜索姓名
    getSearchContent(val){
      this.searchName = val;
    },
    //选中的负责人信息
    handleCurrentChange(val) {
      this.currentRow = val;
    },


    //新增或编辑确认
    onConfirm() {
      let readyUploadList = [];
      this.$refs.pic.uploadFiles.forEach(item=>{
        if(item.status==="ready"){
          readyUploadList.push(item)
        }
      })
      this.$refs.fieldFormRef.validate(async (valid) => {
        if (valid) {
          let res = null;
          this.fieldFormData.week = this.weekList.toString();

          if(this.fieldFormData.times != null){
            if(this.fieldFormData.times !=''){
              this.fieldFormData.times = this.fieldFormData.times.toString();
            }else{
              this.fieldFormData.times = null;
            }
          }
          let bid;
          if (this.actionType) {
            //编辑
            res = await editFieldApi(this.fieldFormData);
            bid = this.fieldFormData.fieldNo;
            //删除以前的图片
            if(this.deletePicsList.length>0){
              this.deletePictures(this.deletePicsList);
            }
          } else {
            //新增
            res = await addFieldApi(this.fieldFormData);
            bid = res.data
          }
          if (res && res.code == 200) {
            if(readyUploadList.length>0){
              this.uploadPictures(readyUploadList,bid)
            }
            //刷新列表
            this.getFieldList();
            this.onClose();
            this.$message.success(res.msg);
          }
        }
      });
    },
    //新增或编辑取消
    onClose() {
      this.fieldDialog.visible = false;
      this.weekList = [];
      this.noCaChoice = false;
      this.noTimeChoice = false;
      this.isChildren = false;
      this.timeList = this.copyTimeList;
      this.deletePicsList = [];
      this.isShowUploadButton(this.filelist)
      this.$refs.pic.clearFiles();
    },
    //新增按钮
    addField(row) {
      this.$resetForm("fieldFormRef", this.fieldFormData);
      this.copyTimeList = this.timeList
      if(row.id==0){
        this.fieldDialog.title = "新增场馆";
        this.fieldDialog.height = 692;
        this.isChildren = false;
      }else{
        this.fieldDialog.title = "新增子场馆";
        this.fieldDialog.height = 636;
        this.isChildren = true;
        this.fieldFormData.cid = row.cid;
        this.weekList = row.week.split(",").map(Number);
        if(row.cid!=null){
          this.noCaChoice = true;
        }
        if(row.uid!=null){
          this.fieldFormData.uid = row.uid;
        }
        if(row.times!=null){
          let list = [];
          this.timeList.forEach(item=>{
            row.times.forEach(index=>{
              if(index==item.id){
                list.push(item)
              }
            })
          });
          this.timeList = list;
        }else{
          this.noTimeChoice = true;
        }
      }
      this.fieldFormData.pid = row.id;
      this.actionType = false;
      this.fieldDialog.visible = true;
    },
    //编辑按钮
    editField(row) {
      this.$resetForm("fieldFormRef", this.fieldFormData);
      this.copyTimeList = this.timeList
      //如果当前编辑的是父级场馆，则无限制
      if(row.pid!=0){
        this.fieldDialog.height = 636;
        this.isChildren = true;
        this.getFieldById(row.pid).finally(()=>{
          this.weekList = this.parentData.week.split(",").map(Number);
          //父场馆属于综合类型，则子场馆可以任意编辑类型
          if(this.parentData.cid!=null && this.parentData.cid==row.cid){
            this.noCaChoice = true;
          }
          //子场馆只能选择父场馆的开放时间
          if(this.parentData.times==null){
            this.noTimeChoice = true;
          }else{
            let list = [];
            this.timeList.forEach(item=>{
              this.parentData.times.forEach(index=>{
                if(index==item.id){
                  list.push(item)
                }
              })
            });
            this.timeList = list;
          }
        });
      }else{
        this.fieldDialog.height = 692;
        this.isChildren = false;
        //回显多选框的内容
        this.weekList = row.week.split(",").map(Number);
      }
      //回显图片
      this.getPicturesByBidApi(row.fieldNo);
      //把当前要编辑的数据复制到数据域，tApi给表单回显
      this.$objCoppy(row, this.fieldFormData);
      //设置编辑的标识
      this.actionType = true;
      //设置弹框属性
      this.fieldDialog.title = "编辑场馆";
      this.fieldDialog.visible = true;
    },
    //查询单个场馆的信息
    async getFieldById(id){
      let res = await getFieldByIdApi({id:id})
      if(res && res.code==200){
        this.parentData = res.data;
        if(res.data.times!=null){
          this.parentData.times = res.data.times.split(",").map(Number);
        }
      }
    },
    //删除按钮
    async deleteField(row) {
      let warning = "确定删除该场馆吗？"
      if(row.children.length > 0) warning = "该场馆下包含其它场馆，确定删除吗？"
      let confirm = await this.$myconfirm(warning);
      if (confirm) {
        let deleteIds = [];
        let deleteNo = [];
        deleteIds.push(row.id);
        deleteNo.push(row.fieldNo);
        this.fieldList.forEach(item=>{
          if(row.id==item.id){
            item.children.forEach(index=>{
              deleteIds.push(index.id);
              deleteNo.push(index.fieldNo);
            })
          }
        });
      //   let res = await deleteFieldApi({id: row.id});
      let res = await deleteFieldApi({ids:deleteIds.toString()})
        if (res && res.code == 200) {
          //删除本地及数据库的图片
          await deleteAllFilesApi({bids: deleteNo});
          // 检查最后一页是否只有一条数据
          //刷新列表
          this.getFieldList();
          this.$message.success(res.msg);
        }
      }
    },
    //获取场馆列表
    async getFieldList() {
      let res = await getFieldListApi({uid:this.$store.getters.userId});
      if (res && res.code == 200) {
        this.getTimes();
        setTimeout(()=>{
          let copyList = res.data;
          //取现有全部时间段
          let timesIds = [];
          this.timeList.forEach(item=>{
            timesIds.push(item.id);
          })
          this.handleData(copyList,timesIds)
          this.fieldList = copyList;
        },100)
      }
    },
    handleData(list,allIds,){
      list.forEach((item)=>{
        //处理负责人格式
        this.fieldUserManagerList.forEach(index=>{
          if(index.id==item.uid){
            item.fieldUserName = index.username
            item.fieldUserNid = index.nid
            item.fieldUserSex = index.sex
            item.fieldUserPhone = index.phone
          }
        });
        //处理类别格式
        if(item.cid==null) {
          item.category = '综合'
        }else{
          this.categories.forEach(index => {
            if(index.id==item.cid){
              item.category = index.label
            }
          });
        }
        //处理时间段格式
        if(item.times!=null) {
          let fieldTimes = item.times.split(",").map(Number)
          item.times = allIds.filter(item=>{
              return fieldTimes.includes(item);
          })
        }
        //处理子场馆
        if(item.children.length>0){
          this.handleData(item.children,allIds)
        }
      })
    },
    //获取场馆时间段
    async getTimes() {
      let res = await getTimesApi();
      if(res && res.code == 200) {
        this.timeList = res.data;
      }
    },
    //获取运动类型
    async getCategory() {
      let res = await getCategoryApi();
      if(res && res.code == 200) {
        this.categories = res.data;
      }
    },
    //获取符合场馆管理员的用户
    async getFieldUserManagerList(){
      let res = await getFieldUserManagerApi();
      if(res && res.code==200) {
        let copylist = [];
        res.data.map(item => {
          const { id, nid, username, sex, phone } = item;
          copylist.push({ id, nid, username, sex, phone });
          })
        this.fieldUserManagerList = copylist;
      }
    },
  },
  watch: {
    searchName(val) {
      if(val.length==0){
        this.showFieldUserManagerList = this.fieldUserManagerList.filter(item=>{ return item.id!=this.editNowRowFieldUser.uid});
      }else{
        this.showFieldUserManagerList = this.fieldUserManagerList.filter(item=>{
          return (item.id!=this.editNowRowFieldUser.uid && item.username.includes(val));
        });
      }
    }
  },
  filters: {
    showCost(val){
      if(val==0) {
        return '免费'
      }else{
        return val+'元'
      }
    },
    showSeat(val){
      if(val<0) {
        return '无限制'
      }else{
        return val+'人'
      }
    }
  }
};
</script>

<style scoped lang="scss">
  .uoloadSty ::v-deep .el-upload--picture-card{
    width: 148px;
    height: 148px;
    line-height: 146px
  }
  .disUoloadSty ::v-deep .el-upload--picture-card{
    display:none;
  }
  .uoloadSty ::v-deep .el-upload-list__item {
    transition: none !important;
  }
  .disUoloadSty ::v-deep .el-upload-list__item {
    transition: none !important;
  }
</style>
